<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>销售退货查询</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">客户名称:</label>
			      <div class="layui-input-inline">
			      	<select id="searchCustomer" name="customerid">
			      		<option value="">请选择客户名称</option>
			      	</select>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">商品名称:</label>
			      <div class="layui-input-inline">
			        	<select id="searchGoods" name="goodsid">
			        		<option value="">请选择商品名称</option>
			        	</select>
			      </div>
			    </div>
			   <div class="layui-inline">
			      <label class="layui-form-label">开始时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="startTime" placeholder="请选择开始时间" id="startTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">结束时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="endTime" placeholder="请选择结束时间" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
		   </div>
		    <div class="layui-form-item" style="text-align: center;">
		      <button type="button" class="layui-btn" lay-submit="" id="doSearch" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
      		  <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
		 	 </div>
		</form>
	</blockquote>
	
	<table id="salesbackTable" class="layui-table" lay-filter="salesbackTable"></table>
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.use(['layer','jquery','table','form','laydate'],function(){
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		  var laydate = layui.laydate;
		  
			//渲染时间选择器
			laydate.render({
				elem:'#startTime',
				type:'datetime'
			});
			laydate.render({
				elem:'#endTime',
				type:'datetime'
			});
		  
			 //加载查询条件的客户的下拉列表
			  $.post("/customer/loadAllAvailableCustomer",function(data){
				  var searchCustomer = $("#searchCustomer");
				  var html = '<option value="">请选择客户名称</option>';
				  $.each(data.data,function(i,item){
					  html+='<option value="'+item.id+'">'+item.customername+'</option>'
				  });
				  searchCustomer.html(html); 
				  form.render();
			  });
		  
		  //加载查询条件的商品的下拉列表
		  $.post("/goods/loadAllAvailableGoods",function(data){
			  var searchGoods = $("#searchGoods");
			  var html='<option value="">请选择商品</option>';
		  	  $.each(data.data,function(i,item){
		  		html+='<option value="'+item.id+'">'+item.goodsname+"["+item.size+"]"+'</option>'
		  	  });
		  	  searchGoods.html(html);
		  	  form.render();
		  });
		  

		//渲染数据表格
			tableIns = table.render({
				elem:'#salesbackTable',
				url:'/salesback/loadAllSalesback',
				defaultToolbar:['filter','print'],
				title: '商品退货数据表',
				height:'full-220',//固定高度
				cols:[ [
					{field:'id',title:'ID',align:'center',fixed: 'left',width:'80'},
					{field:'goodsname',title:'退货商品名称',align:'center',width:'150'},
					{field:'size',title:'退货商品规格',align:'center',width:'150'},
					{field:'customername	',title:'客户名称',align:'center',width:'150'},
					{field:'paytype',title:'退货方式',align:'center',width:'150'},
					{field:'salesbacktime',title:'退货时间',align:'center',width:'150'},
					{field:'number',title:'退货数量',align:'center',width:'150'},
					{field:'operateperson',title:'操作员',align:'center',width:'150'},
					{field:'salebackprice',title:'退货价格',align:'center',width:'150'},
					{field:'remark',title:'退货备注',align:'center',width:'150'},
				] ],
				page:true,
				done: function(res, curr, count){ //处理删除某一页最后一条数据的BUG
			        if(res.data.length==0&&curr!=1){
			        	tableIns.reload({
			        		page:{
			        			curr:(curr-1)
			        		}
			        	});
			        }
			    }
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/salesback/loadAllSalesback?'+params,
		    	})
		    });
	  });
	
	
	</script>
	
	
	
	
</body>
</html>